<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="职位详情" linkId="usr12dnk738joqjf" :linkData="linkData" :isHome="!isApp" :isAppBtn="!isApp">
			<template v-if="isApp"><view slot="right" class="share fboxRow Ycenter Xend" @click="shareTap">
				<text class="bwfont bw-zhuanfa font30"></text>
			</view></template>	
		</HeadCustom>
		<view class="wrap">
			<view class="card mt40 jobInfo fboxRow">
				<view class="fboxCol flex1">
					<view class="title font42">{{detail.jobName}}</view>
					<view class="info mt8 lh38 color-6B707C font26">
						<text class="">{{detail.workArea}}</text>
						<text class="ml24">{{gainData(detail.workExperience, 'workExperience').label}}</text>
						<text class="ml24">{{gainData(detail.minEducation, 'educationList').label}}</text>
					</view>
				</view>
				<view class="salary fboxRow Xend font38">
					<template v-if="detail.salaryMin == 0 ">面议</template>
					<template v-if="detail.salaryMin && detail.salaryMax">
						{{unitNum(detail.salaryMin)}}- {{unitNum(detail.salaryMax)}}
					</template>
				</view>
			</view>
			<view class="company-item" @click="goApp('companyCard')">
				<view class="fboxRow Ycenter">
					<image class="logo" :src="detail.companyLogo" mode="aspectFill"></image>
					<view class="fboxCol flex1">
						<view class="fboxRow Ycenter">
							<view class="flex1 font30 fboxRow Ycenter">
								<text class="name font-ell1 lh44">{{detail.companyName}}</text>
								<text class="ml24 bwfont bw-qiye color-linear"></text>
							</view>
							<view class="btn fboxRow Ycenter Xcenter color-E8CDA7 font22 bg-363A43">进入企业名片</view>
						</view>
						<view class="font26 color-6B707C lh38">{{detail.industryName}}</view>
						<view class="font26 color-6B707C lh38 font-ell1">{{detail.workAddress}}</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="card">
				<view class="fboxRow Ycenter">
					<view class="tit font38 font-weight flex1 color-E8CDA7">职位详情</view>
				</view>
				<view class="con mt16 font30">
					<view class="tags">
						<Tags :list="detail.jobKeywordList" />
					</view>
					<view class="mt32 lh44 color-ACB4C7">
						<view style="white-space: pre-wrap;" v-html="detail.jobDesc"></view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="card company-user">
				<view class="bd mt24 fboxRow Ycenter font26" @click="goApp('card')">
					<image class="avatar mr24" :src="detail.creatorAvatar" mode="aspectFill"></image>
					<view class="fboxCol flex1">
						<view class="font30 lh44">{{detail.creatorName}}</view>
						<view class="font26 color-6B707C lh38">{{detail.companyName}} {{detail.positionName}}</view>
					</view>
					<text class="bwfont bw-arrow-right color-ACB4C7 font28"></text>
				</view>
				<view class="map mt32" @click="goAddress">
					<DetailMap pattern="border-radius: 12rpx;" :longitude="detail.longitude" :latitude="detail.latitude" 
					:address="detail.workAddress" :companyName="detail.companyName" />
				</view>
			</view>
			<view class="line"></view>
			<view class="card fboxCol">
				<view class="tit font38 font-weight flex1 color-E8CDA7">该公司其他岗位</view>
				<view class="mt40">
					<view v-for="(item, index) in listData" :key="index">
						<RecruitmentItem type="enterpriseDetail" :innerData="item" />
					</view>
					<u-loadmore fontSize="24rpx" :status="listConfig.loading" />
				</view>
			</view>
			<ModelPublic ref="modelRef" content="确定是否投送简历？" @confirm="inviteTap" />
			<BottomFixed>
				<view class="btn-group-inner fboxRow Ycenter Xcenter flex1">
					<view class="flex1 action-group fboxRow Ycenter font22">
						<view class="fboxCol Ycenter Xcenter action-item flex1" @click="collect">
							<text class="bwfont font40 bw-a-ziyuan11"></text>
							<text class="text">{{detail.isCollected ? '已收藏' : '收藏'}}</text>
						</view>
						<view class="fboxCol Ycenter Xcenter action-item flex1" @click="deliverTap">
							<text class="bwfont font40" :class="detail.isSend ? 'bw-yitoudi' : 'bw-weitoudi'"></text>
							<text class="text">{{detail.isSend ? '已投递' : '投简历'}}</text>
						</view>
					</view>
					<view class="btn btn-outline fboxRow Ycenter Xcenter font30 color-141720 bg-linear"
						@click="goApp('contact')">沟通一下</view>
				</view>
			</BottomFixed>
		</view>
		<not-login ref="notLogin" />
		<NotInfo :show.sync="isVitaModal" type='perfect' />
	</view>
</template>

<script>
	import {
		jobDetailForUser,
		companyJobOther,
		userCollectOrg,
		deliverJob,
		jobCommunicate,
		resumeInfo
	} from '@/api/recruit.js';
	import {
		gainData
	} from '../common/config.js';
	import Tags from '../components/tags.vue';
	import DetailMap from '../components/detail-map.vue';
	import RecruitmentItem from '@/components/card/recruitment-item.vue';
	import NotInfo from '@/components/not-index/not-info.vue';
	import ModelPublic from '@/components/model-public/index.vue';
	import { getRequest, unitNum } from '@/static/js/common.js';
	import { utf8to16, base64decode} from '@/static/js/Base64.js';
	import { listMixins } from '../common/list.mixins.js';
	// #ifdef H5
	import {wxSdk} from '@/static/js/wxjsdk.js';
	// #endif
	import BottomFixed from '@/components/bottom-btn/fixed.vue'
	export default {
		mixins: [listMixins],
		components: {
			Tags,
			DetailMap,
			RecruitmentItem,
			ModelPublic,
			NotInfo,
			BottomFixed
		},
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				gainData,
				unitNum,
				detail: {},
				id: '',
				listConfig: {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				},
				listData: [],
				isDeliver: false,
				linkData: {
					id: ''
				},
				isApp: false,
				isVitaModal: false
			}
		},
		onLoad(options) {
			if(options && options.benwu){
				const benwu = utf8to16(base64decode(options.benwu))
				const token = {
					access_token: getRequest(benwu,'token'),
					companyId: getRequest(benwu,'companyId'),
					statusBarHeight: getRequest(benwu,'statusBarHeight')
				}
				this.id =  getRequest(benwu,'id')
				getApp().globalData.companyId = token.companyId
				getApp().globalData.statusBarHeight = token.statusBarHeight
				uni.setStorageSync('bw_params', JSON.stringify(token));
			}
			if (options && options.id) { this.id = options.id }
			this.linkData.id = this.id
			
			// #ifdef H5
			window.appCallback = this.appCallback;
			// #endif
			
			if(options && options.isApp){
				this.isApp = options.isApp == 1 ? true : false
			}else{
				const {bw_link} = getApp().getBWData(['bw_link'])
				this.isApp = bw_link.isApp == 1 ? true : false
			}
			
			this.getInit()
		},
		methods: {
			shareTap(){
				const {companyLogo, companyId, id, jobName, companyName,salaryMax, salaryMin, workAddress,workArea, jobDesc, workExperience,minEducation} = this.detail
				const href = window.location.href
				const url = href.substr(0, href.indexOf("?")) +'?id='+this.id
				const data = {type: 'share', pageType: 'resume',  url: url,
					companyId,companyLogo,jobName,companyName,workAddress, jobDesc,workArea,id,
					 salary: salaryMin ? unitNum(salaryMin) +'-'+ unitNum(salaryMax) : '面议',
					 workExperience:gainData(workExperience, 'workExperience').label,
					 minEducation:gainData(minEducation, 'educationList').label
				 }
				this.$bridge.callHandler('appHandler', data, (res) => {
					console.log('appHandler', '返回', res)
				})
			},
			appCallback(e){
				
			},
			getInit() {
				this.listConfig = {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				}
				jobDetailForUser({
					id: this.id
				}).then(res => {
					this.detail = res.data
					this.getList()
				})
			},
			getList() {
				const {
					current,
					size,
					loading
				} = this.listConfig
				companyJobOther({
					current,
					size,
					companyId: this.detail.companyId,
					exceptJobId: this.id
				}).then(res => {
					if (this.listData.length) {
						this.listData = this.listData.concat(res.data.list)
					} else {
						this.listData = res.data.list
					}
					this.listLoading(res)
				})
			},
			goPage() {
				getApp().globalData.recruitmentTemp = this.detail
				if (this.detail.auditStatus == 1) {
					this.$pageTo('/recruit/enterprise/publishRecruitment?id=' + this.detail.id)
				} else {
					this.$pageTo('/recruit/enterprise/process', {
						id: this.detail.id
					})
				}
			},
			onReachBottom() {
				this.listMore()
			},
			collect() {
				const {bw_params} = getApp().getBWData(['bw_params'])
				if(bw_params.access_token){
					userCollectOrg({
						"jobId": this.detail.id
					}).then(res => {
						if (res.data) {
							this.detail.isCollected = !this.detail.isCollected
							uni.showToast({
								icon: 'none',
								title: this.detail.isCollected ? '收藏成功' : '取消收藏'
							})
						}
					})
				}else{
					this.$refs.notLogin.openLogin({
						show: true,
						position: 'center'
					})
				}
			},
			deliverTap(){
				const {bw_params} = getApp().getBWData(['bw_params'])
				if(bw_params.access_token){
					if(this.detail.jobStatus != 1){
						uni.showToast({
							icon: 'none',
							title: '职位暂未开放'
						})
						return 
					}
					if (this.detail.isSend) {
						uni.showToast({
							icon: 'none',
							title: '你已经投递过该简历了'
						})
					} else {
						const vitaTemp = getApp().globalData.vitaTemp
						if(vitaTemp.memberId && vitaTemp.resumeOpen){
							this.$refs.modelRef.show = true
						}else{
							// 缓存可能不存在
							resumeInfo().then(res => {
								if (res.data) {
									getApp().globalData.vitaTemp = res.data;
									if(res.data.resumeOpen){
										this.$refs.modelRef.show = true
									}else{
										this.$refs.modelRef.show = false
										this.isVitaModal = true
									}
								}else{
									this.$refs.modelRef.show = false
									this.isVitaModal = true
								}
							});
						}
						// const vitaTemp = getApp().globalData.vitaTemp
						// if(vitaTemp.isAuth){
						// 	this.isDeliver = true
						// }else{
						// 	uni.showToast({
						// 		icon: 'none',
						// 		title: '为确保信息的真实性，请您先实名认证！'
						// 	})
						// }
					}
					
				}else{
					this.$refs.notLogin.openLogin({
						show: true,
						position: 'center'
					})
				}
			},
			inviteTap() {
				deliverJob({
					jobId: this.detail.id
				}).then(res => {
					if (res.data) {
						this.$refs.modelRef.show = false
						this.detail.isSend = !this.detail.isSend
						uni.showToast({
							icon: 'none',
							title: '简历投递成功'
						})
					}
				})
			},
			goApp(type) {
				if(this.detail.jobStatus != 1){
					uni.showToast({
						icon: 'none',
						title: '职位暂未开放'
					})
					return 
				}
				const {bw_link} = getApp().getBWData(['bw_link'])
				if(bw_link.isApp != 1){
					if (type == 'companyCard') {
						this.$pageTo('/businessCard',{id: this.detail.companyId, isScan: 1})
					}else if(type == 'contact'){
						this.$pageTo('/about/guidePage')
					}else{
						this.$pageTo('/CardDetail',{id: this.detail.creatorId})
					}
					return
				}
				if (type == 'companyCard') {
					const data = {
						type: 'companyCard',
						companyId: this.detail.companyId
					}
					this.$bridge.callHandler('recruitHandler', data, () => {
						console.log('recruitHandler', '返回')
					})
				} else if (type == 'contact') {
					const data = {
						type: 'contact',
						memberId: this.detail.creatorId,
						userName: this.detail.creatorName
					}
					jobCommunicate({id: this.id }).then(res=>{})
					this.$bridge.callHandler('recruitHandler', data, () => {
						console.log('recruitHandler', '返回')
					})
				} else {
					const data = {
						type: 'card',
						memberId: this.detail.creatorId
					}
					this.$bridge.callHandler('recruitHandler', data, () => {
						console.log('recruitHandler', '返回')
					})
				}
			},
			goAddress() {
				// #ifdef H5
					const lx= window.navigator.userAgent.toLowerCase();
					if (lx.match(/MicroMessenger/i) == 'micromessenger') {
						wxSdk.openLocation({
							lat: this.detail.latitude,
							lng: this.detail.longitude,
							name: this.detail.companyName,
							address: this.detail.workAddress
						})
					} else {
						this.$pageTo('/recruit/enterprise/address?id=' + this.detail.id)
					}
				// #endif
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 32rpx 40rpx;
	}

	.prompt {
		padding: 24rpx 28rpx;
		background: rgba(232, 205, 167, 0.1);
		border-radius: 12rpx;
	}

	.ml10 {
		margin-left: 10rpx;
	}

	.card {
		// padding: 32rpx;
		margin-bottom: 40rpx;
	}

	.card .tit {
		line-height: 56rpx;
	}

	.card .con {
		line-height: 38rpx;
	}

	.title {
		line-height: 60rpx;
	}

	.salary {
		width: 200rpx;
		line-height: 60rpx;
		color: #FE6850
	}

	.company-item {
		// padding: 32rpx;
		border-radius: 12rpx;
		margin-bottom: 40rpx;
	}

	.company-item .logo {
		margin-right: 24rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
	}

	.company-item .icon {
		margin-left: 24rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.company-item .name {
		max-width: 280rpx;
	}

	.company-item .btn {
		padding: 12rpx 12rpx;
		min-width: 148rpx;
		border-radius: 8rpx;
		border: 1px solid var(--senderViewColor);background: var(--pureButtonBackOneColor);color: var(--senderViewColor)
	}

	.company-user .avatar {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
	}

	.map { width: 100%;
		height: 352rpx;
		background-color: #0C0C0F;
		border-radius: 12rpx;
	}

  @media (min-width: 780px) {
    .map {
      height: 704rpx;
    }
  }


	.line {
		margin: 32rpx 0;
		height: 1rpx;
		background: var(--backgroundDivisionColor);
	}

	.btn-group-inner .icon {
		width: 48rpx;
		height: 48rpx
	}
	
	.btn-group-inner .btn {
		height: 88rpx;
		border-radius: 12rpx;
	}
	.btn-group-inner .btn-outline{width: 320rpx;}
	.btn-group-inner .action-item { color:var(--contourButtonTextColor); height: 88rpx; }
	.btn-group-inner .action-group{padding-right: 40rpx;}
	.btn-group-inner .action-item .text{margin-top: 10rpx;}
	.btn-group-inner .btn+.btn {
		margin-left: 24rpx;
	}
</style>